<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="../js/babel.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>


<script type="text/babel">
  /**
  * 上一节中 我们将以个组件封装起来 但是在使用的时候 我们还是用定时器去运行它
  * 这种不能作为共用组件
  * 现在 我们想真正的封装一个通用的组件 可复用的组件
  * 1、通过es6 中的class 来封装组件，不在通过函数的形式去定义组件
  */

  class Test extends React.Component {
    constructor(props, state) {
      super(props)
      this.state = { date: new Date(), name: 'mal' }
    }

    componentDidMount() {
      this.timer = setInterval(() => this.tick(), 1000)
    }

    componentWillUnmount() {
      clearInterval(this.timer)
    }

    tick() {
      this.setState({
        date: new Date()
      })
    }

    render() {
      return (
        <div>
          <h2>Hello, {this.state.name}</h2>
          <div>现在时间: {this.state.date.toLocaleString()}</div>
        </div>
      )
    }
  }

  function App(props) {
    return <div>
      <Test />
      <Test />
      <Test />
    </div>
  }

  ReactDOM.render(<App />, document.getElementById('root'))
</script>